<template>
	<view class="container">
	    <!-- 工单列表 -->
	    <view v-for="(item, index) in orderData" :key="item.id" class="order-card">
			<view class="order-header">
				<view class="description-label" width="80">问题描述:		{{ item.orderDesc }}</view>
			</view>
		
			<view class="image-container">
				<view class="description-image">现场图片:	</view>
				<image :src="baseUrl+item.image" class="preview-image" mode="aspectFill"></image>
			</view>
			
			<view class="repair-plan-container">
				<text class="repair-plan-label">维修计划:</text>
				<input type="text" v-model="item.repairPlan" class="repair-plan-input"/>
			</view>
		
	        <button @click="handleSubmit(item)">提交</button>
	  </view>
	</view>
</template>

<script>
import { getWorkerRepair, editWorkerOrder } from "@/api/workerOrder.js"



export default {
  data() {
    return {
		orderData: [] ,
		passData: {
			id: '',
		    orderDesc: '',
		    repairPlan: '', 
		    image: ''
		},
		baseUrl: "http://localhost:8080",
		statusMap: {
	          0: '待派单',
	          1: '待接单',
	          2: '待维修',
			  4: '已完成',
	          5: '已关闭'
	        },
		priorityMap: {
	          1: '高',
	          2: '中',
	          3: '低'
	        }
    };
  },
  
  onLoad(options) {
    this.fetchOrderData(100);
  },
  
  methods: {
    fetchOrderData(workerId) {
		getWorkerRepair(workerId).then(response => {
		    this.orderData = response.data;
		}).catch(error => {
		    console.error('获取工单数据失败:', error);
		});
	},
	handleSubmit(item) {
		console.log(item);
		editWorkerOrder(item.id,4,item.repairPlan).then(()=>{
			this.$tab.redirectTo('/pages/OrderDetail/OrderRepair');
		});
	},
	getImage(item) {
		uni.chooseImage({
			success: function (res) {
				item.image = res.tempFilePaths[0];
				console.log(res.tempFilePaths[0]);
				console.log(item.image);
				_this.loadImage();
			},
		})
	},
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.description-label {
 font-size: 18px; /* 字体大小 */
 color: #333; /* 字体颜色 */
}


.description-content {
  font-size: 20px; /* 字体大小 */
  color: #666; /* 字体颜色 */
}

.order-card {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 24rpx;
  margin-bottom: 10px;
}

.image-container {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  /* 你可以根据需要添加其他样式，如间距等 */
  margin-bottom: 10px;
}

/* 描述标签样式 */
.description-image {
	font-size: 18px; /* 字体大小 */
	margin-right: 8px; /* 描述和图片之间的间距 */
  /* 你可以根据需要添加其他样式，如字体大小、颜色等 */
}

/* 预览图片样式 */
.preview-image {
  /* 你可以根据需要设置图片的宽度和高度 */
  width: 100px; /* 示例宽度 */
  height: 80px; /* 示例高度 */
}

.repair-plan-container {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 添加底部间距 */
}

.repair-plan-label {
  width: 80px; /* 设置维修计划标签的宽度 */
  margin-right: 10px; /* 添加右边间距 */
  font-size: 18px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}

.repair-plan-input {
  flex: 1; /* 输入框占满剩余空间 */
  border: 1px solid #ccc; /* 添加边框 */
  padding: 0px; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
}

</style>
